<!DOCTYPE html>
<!--
demo描述：演示jCutter的使用方法、
作者：czb
时间：2015/9/20 16:00
注：如果使用本demo请勿删除此描述。
-->
<html>
    <head>
        <title>jCutter 演示 3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="../jQuery-1.10.2.js" type="text/javascript"></script>
		<script src="../jQuery.jCutter.js" type="text/javascript"></script>
		<script type="text/javascript">

			$(function(){
				init();
				$('#change_border0').bind('click',init);
				$('#change_border1').bind('click',function(){
					$('#demo_img').jCutter({
						css:{
							borderColor:'red'
						},
						cutCss:{
							borderColor:'red'
						}
					});
				});
				$('#change_border2').bind('click',function(){
					$('#demo_img').jCutter({
						css:{
							borderColor:'white'
						},
						cutCss:{
							borderColor:'white'
						}
					});
				});
				$('#change_border3').bind('click',function(){
					$('#demo_img').jCutter({
						width:600,
						height:600
					});
				});
				$('#change_border4').bind('click',function(){
					$('#demo_img').jCutter({
						width:500,
						height:500
					});
				});
				$('#change_border5').bind('click',function(){
					$('#demo_img').jCutter({
						maskColor: 'black'
					});
				});
				$('#change_border6').bind('click',function(){
					$('#demo_img').jCutter({
						maskColor: 'blue'
					});
				});
				$('#change_border7').bind('click',function(){
					$('#demo_img').jCutter({
						cutWidth:300,
						cutHeight:300
					});
				});
				$('#change_border8').bind('click',function(){
					$('#demo_img').jCutter({
						cutWidth:100,
						cutHeight:100
					});
				});
				$('#demo_img').attr('src','./demo.jpg');
			});
			function init(){
				$('#demo_img').jCutter({
					width:800,
					height:800,
			//		autoAjust: false,
			//		limitEdge: false,
					maskColor: 'red'
				});
			}
		</script>
		<style>
			input{
				width:200px
			}
		</style>
    </head>
    <body>
		<input id="change_border0" type="button" value="重置"/><br /><br />
		<input id="change_border1" type="button" value="改变边框为红色"/>
		<input id="change_border2" type="button" value="重置边框为白色"/><br /><br />
		<input id="change_border3" type="button" value="改变边框大小至600*600"/>
		<input id="change_border4" type="button" value="改变边框大小至500*500"/><br /><br />
		<input id="change_border5" type="button" value="改变蒙布为黑色"/>
		<input id="change_border6" type="button" value="改变蒙布为蓝色"/><br /><br />
		<input id="change_border7" type="button" value="改变截取框大小至300*300"/>
		<input id="change_border8" type="button" value="改变截取框大小至100*100"/><br /><br />
        <img id="demo_img" />
    </body>
</html>
